<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js"></script>
</head>
<body>
	<h2>Basic DataGrid--js加载</h2>
	<table id="dg" title="我的datagrid" style="width:800px;height:400px"></table>
	<div id="tb">
			<table >
				<tr>
					<td >
							<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="addRowsOpenDlg();">添加</a>
							<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="updRowsOpenDlg();">编辑</a>
							<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delRows();">删除</a>
							<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-print" plain="true" onclick="exportExcel();">导出Excel</a>
					</td>
					<td >
						<input id="searchbox" type="text"/>
					</td>
					<td >
						<a href="javascript:void(0);" class="easyui-linkbutton" iconCls="icon-search" plain="true" onclick="tbsCompanySearch();">高级查询</a>
					</td>
				</tr>
			</table>
	</div>
	<div id="mm">
				<div name="name">公司名称</div>
				<div name="tel">公司电话</div>
				<div name="fax">传真</div>
				<div name="address">地址</div>
				<div name="zip">邮政编码</div>
				<div name="email">邮箱</div>
				<div name="contact">联系人</div>
				<div name="description">描述</div>
	</div>
</body>
<script type="text/javascript">
var $dg=$("#dg");
var $grid;
$.modalDialog = function(options) {
	if ($.modalDialog.handler == undefined) {// 避免重复弹出
		var opts = $.extend({
			title : '',
			width : 840,
			height : 680,
			modal : true,
			onClose : function() {
				$.modalDialog.handler = undefined;
				$(this).dialog('destroy');
			}
		}, options);
		opts.modal = true;// 强制此dialog为模式化，无视传递过来的modal参数
		return $.modalDialog.handler = $('<div/>').dialog(opts);
	}
};
//高级查询
$.gradeSearch=function($dg,formId,url) {
	$("<div/>").dialog({
		href : url,
		modal : true,
		title : '高级查询',
		top : 120,
		width : 480,
		buttons : [ {
			text : '增加一行',
			iconCls : 'icon-add',
			handler : function() {
				var currObj = $(this).closest('.panel').find('table');
				currObj.find('tr:last').clone().appendTo(currObj);
				currObj.find('tr:last a').show();
			}
		}, {
			text : '确定',
			iconCls : 'icon-ok',
			handler : function() {
				$dg.datagrid('reload',$.serializeObject($(formId)));
			}
		}, {
			text : '取消',
			iconCls : 'icon-cancel',
			handler : function() {
				$(this).closest('.window-body').dialog('destroy');
			}
		} ],
		onClose : function() {
			$(this).dialog('destroy');
		}
	});
};
//序列化表单到对象
$.serializeObject = function(form) {
	var o = {};
	$.each(form.serializeArray(), function(index) {
		if (o[this['name']]) {
			o[this['name']] = o[this['name']] + "," + (this['value']==''?' ':this['value']);
		} else {
			o[this['name']] = this['value']==''?' ':this['value'];
		}
	});
	return o;
};
$(function(){
	$grid=$dg.datagrid({
		url:'datagrid_data1.json',
		pagination:true,
		rownumbers:true,
		border:true,
		striped:true,
		singleSelect:true,
		toolbar:'#tb',
		columns : [ [ {field : 'itemid',title : 'Item ID',width : parseInt($(this).width()*0.1)},
		              {field : 'productid',title : 'Product',width : parseInt($(this).width()*0.1)},
		              {field : 'listprice',title : 'List Price',width : parseInt($(this).width()*0.1),align : 'right'},
		              {field : 'unitcost',title : 'Unit Cost',width :parseInt($(this).width()*0.1),align : 'right'},
		              {field : 'attr1',title : 'Attribute',width : parseInt($(this).width()*0.1),align : 'left'},
		              {field : 'status',title : 'Status',width : parseInt($(this).width()*0.1),align : 'right'}
		              ] ]
		
	});
	//搜索框
	$("#searchbox").searchbox({ 
		menu:"#mm", 
		prompt :'模糊查询',
	    searcher:function(value,name){   
	    	alert('You input: ' + value+'('+name+')');
	    }
	   
	}); 
});
//高级查询
function tbsCompanySearch() {
	$.gradeSearch($dg,"#tbCompanySearchFm","search.html");
}
//高级搜索 删除 row
function tbCompanySearchRemove(curr) {
		$(curr).closest('tr').remove();
}

//删除
function delRows(){
	var row = $dg.datagrid('getSelected');
	if(row){
		var rowIndex = $dg.datagrid('getRowIndex', row);
		parent.$.messager.confirm("提示","确定要删除记录吗?",function(r){
			if(r){
				//持久删除
				/* $.ajax({
					url:"companyInfo/companyInfoAction!delCompanyInfo.action",
					data: "companyId="+row.companyId,
					success: function(rsp){
						$.messager.show({
							title : rsp.title,
							msg : rsp.message,
							timeout : 1000 * 2
						});
					}
				}); */
				//ajax成功回调后-->页面删除
				$dg.datagrid('deleteRow', rowIndex);
				parent.$.messager.alert("提示",row.itemid+" is deleted!");
			}
		});
	}else{
		parent.$.messager.show({
			title : "提示",
			msg :"请选择一行记录!",
			timeout : 1000 * 2
		});
	}
}

//弹窗增加公司
function addRowsOpenDlg() {
	$.modalDialog({
		title : '添加',
		width : 600,
		height : 400,
		href : 'edit.html',
		buttons : [ {
			text : '保存',
			iconCls : 'icon-ok',
			handler : function() {
				parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
				var f = parent.$.modalDialog.handler.find("#form");
				f.submit();
			}
		}, {
			text : '取消',
			iconCls : 'icon-cancel',
			handler : function() {
				parent.$.modalDialog.handler.dialog('destroy');
				parent.$.modalDialog.handler = undefined;
			}
		}
		]
	});
}
//弹窗修改
function updRowsOpenDlg() {
	var row = $dg.datagrid('getSelected');
	if (row) {
		parent.$.modalDialog({
			title : '编辑公司',
			width : 600,
			height : 400,
			href : "edit.html",
			onLoad:function(){
				var f = parent.$.modalDialog.handler.find("#form");
				f.form("load", row);
			},			
			buttons : [ {
				text : '编辑',
				iconCls : 'icon-ok',
				handler : function() {
					parent.$.modalDialog.openner= $grid;//因为添加成功之后，需要刷新这个dataGrid，所以先预定义好
					var f = parent.$.modalDialog.handler.find("#form");
					f.submit();
				}
			}, {
				text : '取消',
				iconCls : 'icon-cancel',
				handler : function() {
					parent.$.modalDialog.handler.dialog('destroy');
					parent.$.modalDialog.handler = undefined;
				}
			}
			]
		});
	}else{
		parent.$.messager.show({
			title :"提示",
			msg :"请选择一行记录!",
			timeout : 1000 * 2
		});
	}
}
</script>
</html>